<template>
    <hl-page :hidden-tab-bar="false" title="阿玛迪斯">
        <div class="content" slot="content">
            <div class="user-head">
                <img src="../assets/images/default.png" class="avatar"/>
                <div class="user-info">
                    <h1>{{user.name}}<label class="level">{{user.level_label}}</label></h1>
                    <p>ID:{{user.id}}</p>
                    <p>加入时间:{{user.created_at}} <cube-button class="location-right" :inline="true" @click="goCheck">实名认证</cube-button>
                    </p>
                    <p>推荐人:{{user.parent?user.parent.name:'平台'}}</p>

                </div>
            </div>
            <div class="money-panel">
                <div class="panel-title">
                    我的收益 <span class="right-action" @click="goCash">收益提现 <i class="amds icon-right-arrow"></i></span>
                </div>
                <div class="panel-body">
                    <div class="money-item-left">
                        <p class="money">￥{{user.money?user.money:0}}</p>
                        <p class="label">我的收益</p>
                    </div>
                    <div class="money-item-right">
                        <div class="row" v-show="user.level > 1">
                            <div class="sub-item">
                                <p class="money">{{user.month_pv?`${parseInt(user.month_pv)/10000}万`:0}} pv</p>
                                <p class="label">个人当月Pv</p>
                            </div>
                            <div class="sub-item">
                                <p class="money">{{user.group_month_pv?`${parseInt(user.group_month_pv)/10000}万`:0}} pv</p>
                                <p class="label">组织当月Pv</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="sub-item">
                                <p class="money">{{user.person_total_pv?`${parseInt(user.person_total_pv)/10000}万`:0}} pv</p>
                                <p class="label">个人累计Pv</p>
                            </div>
                            <div class="sub-item">
                                <p class="money">{{user.group_total_pv?`${parseInt(user.group_total_pv)/10000}万`:0}} pv</p>
                                <p class="label">组织累计Pv</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="user-grid">
                <div class="grid-item" @click="gridClick(item)" v-show="user.level >= item.level" v-for="item in grid">
                    <img class="grid-item-icon" :src="item.icon"/>
                    <label class="grid-item-label">{{item.label}}</label>
                </div>
            </div>
            <div class="btn-group" style="margin-top: 24px">
                <!--<cube-button @click="updateLevel" style="margin-bottom: 10px;" :primary="true" v-if="user.level == 1">-->
                <!--升级成为专员-->
                <!--</cube-button>-->
                <cube-button @click="logout">登出</cube-button>
            </div>
        </div>
        <hl-tabbar slot="tab" :active="active" @tabBarSelect="changeTab"/>
    </hl-page>
</template>

<script>
    import HlTabbar from "../components/hl-tabbar";
    import HlPage from "../components/hl-page";
    import {_1, _2, _3, _4, _5, _6, _7} from '../assets/images/index';
    import {Url} from "../utils/config";

    export default {
        components: {
            HlPage,
            HlTabbar
        },
        name: "me",
        data() {
            return {
                active: 3,
                grid: [
                    {
                        label: "我的基金",
                        icon: _1,
                        level: 1,
                        path: '/user/my_fund'
                    },
                    {
                        label: "我的股权",
                        icon: _2,
                        level: 1,
                        path: '/user/my_stock'
                    },
                    {
                        label: "津贴明细",
                        icon: _3,
                        level: 2,
                        path: '/user/gift'
                    },

                    {
                        label: "基金明细",
                        icon: _4,
                        level: 2,
                        path: '/user/fund'
                    },
                    {
                        label: "股权明细",
                        icon: _5,
                        level: 2,
                        path: '/user/stock'
                    },
                    {
                        label: "差额明细",
                        icon: _6,
                        level: 2,
                        path: '/user/radio'
                    },
                    {
                        label: "邀请码",
                        icon: _7,
                        level: 2,
                        path: "/user/code"
                    },
                ]
            }
        },
        computed: {
            user() {
                return this.$store.state.user
            }
        },
        mounted() {
            this.$store.dispatch('loadProfile');
        },
        methods: {
            goCash() {
                this.$router.push('/user/cash/logs')
            },
            updateLevel() {
                let toast = this.$createToast({
                    txt: "正在请求",
                    time: 0
                })
                toast.show();
                this.$post(Url.updateLevel).then((res) => {
                    toast.hide();
                    this.$createToast({
                        txt: "升级成功",
                        time: 1500,
                        type: "correct"
                    }).show();
                    setTimeout(() => {
                        this.$store.dispatch('loadProfile')
                    }, 1500)
                }).catch((error) => {
                    toast.hide();
                    this.$createToast({
                        txt: error,
                        time: 1500,
                        type: "error"
                    }).show();
                })
            },
            logout() {
                this.$createToast({
                    type: 'correct',
                    txt: '登出成功'
                }).show();
                setTimeout(() => {
                    this.$store.dispatch("logout");
                    this.$router.push('/');
                }, 1500)
            },
            goCheck(){
              this.$router.push("/profile");
            },

            changeTab(item, index) {
                switch (index) {
                    case 0:
                        this.$router.push('/');
                        break;
                    case 1:
                        this.$router.push('/team');
                        break;
                    case 2:
                        this.$router.push('/help');
                        break;
                    case 3:
                        this.$router.push('/me');
                        break;
                }
            },
            gridClick(item) {
                console.log(item)
                if (item.path) {
                    this.$router.push(item.path)
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";

    .user-head {
        height: 240px;
        background: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        .location-right {
            margin-left: 12px;
        }

        .avatar {
            width: 140px;
            margin-left: 32px;
            margin-right: 32px;
            height: 140px;
            border-radius: 50%;
            border: solid 1PX #e0e0e0;
        }
        .user-info {
            display: flex;
            flex-direction: column;
            h1 {
                font-size: 22PX;
                font-weight: bold;
                .level {
                    font-size: 14PX;
                    margin-left: 32px;
                    color: @app-color;
                }
                margin-bottom: 10px;
            }
            p {
                color: #888888;
                margin-bottom: 16px;
                font-size: 12PX;
                .parent {
                    margin-left: 32px;
                }
            }
        }
    }

    .money-panel {
        margin-top: 24px;
        padding: 0 24px;
        background: #fff;
    }

    .panel-title {
        font-size: 32px;
        color: @app-color;
        padding: 24px 0;
        line-height: 32px;
        .right-action {
            float: right;
            color: #adadad;
            font-size: 24px;
        }
    }

    .btn-group {
        background: #fff;
        padding: 32px;
    }

    .user-grid {
        margin-top: 24px;
        background: #fff;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .grid-item {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            &:active {
                background: darken(#fff, 5%);
            }
            .grid-item-label {
                font-size: 28px;
                color: #888;
                margin-top: 24px;
            }
            .grid-item-icon {
                width: 72px;
                height: 72px;
                display: block;
            }
        }
    }

    .panel-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .money-item-left {
            flex: 1;
            height: 240px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .money {
                color: @app-color;
                font-size: 32px;
            }
            .label {
                margin-top: 10px;
                font-size: 28px;
                color: #444;
            }
        }
        .money-item-right {
            flex: 2;
            height: 240px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .row {
                height:120px;
                display: flex;
                width: 100%;
                flex-direction: row;
            }
            .sub-item {
                display: flex;
                flex: 1;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .money {
                    color: @app-color;
                    font-size: 32px;
                }
                .label {
                    margin-top: 10px;
                    font-size: 28px;
                    color: #444;
                }
            }

        }
    }
</style>